<template>
  <ContainerContent :loading="loading" :pagination="pagination" @run="run">
    <template #header>
      <a-button type="primary" @click="open">
        <i-icons-add />
        添加授权
      </a-button>
      <CloudFilterBar v-model="params" :run="run" :schemes="filterSchemes" />
    </template>
    <a-table
      ref="tableRef"
      v-bind="commonTableProps"
      :columns="columns"
      :data="data"
      @sorter-change="onSorterChange">
      <template #bind_status="{ record }">
        <span :class="{ 'text-#8F959E': record.bind_status === 2 }">{{
          getOptionLabel(record.bind_status, bindStatusOptions)
        }}</span>
      </template>
      <template #status="{ record }">
        <a-switch
          :model-value="record.status"
          :checked-value="1"
          :unchecked-value="2"
          size="small"
          :before-change="(val) => handleBeforeChange(record, val as 1 | 2)" />
      </template>
      <template #expired_at="{ record }">
        <edit-field
          type="date"
          edit-title="编辑到期时间"
          label="到期时间"
          mouse-over
          hover-table
          placeholder="请选择到期时间"
          field="expired_at"
          :no-verification="false"
          rule-message="请选择到期时间"
          :max-length="20"
          :required="false"
          :content="record.expired_at"
          content-type="date"
          :content-class="getExpirationColor(record.expired_at)"
          :fn="updateAdminApiLicenseApi"
          :refresh-fn="run"
          :params="{
            id: record.id,
            remark: record.remark,
            status: record.status
          }"
          :default-value="String(record.expired_at)">
        </edit-field>
      </template>
      <template #remark="{ record }">
        <edit-field
          type="input"
          edit-title="编辑备注"
          label="备注"
          mouse-over
          hover-table
          placeholder="请输入备注"
          field="remark"
          :no-verification="true"
          :max-length="20"
          :required="false"
          :content="record.remark"
          :fn="updateAdminApiLicenseApi"
          :refresh-fn="run"
          :params="{
            id: record.id,
            expired_at: record.expired_at,
            status: record.status
          }"
          :default-value="record.remark">
        </edit-field>
      </template>
      <template #action="{ record }">
        <a-link :hoverable="false" @click="handleDetail(record)">
          查看详情
        </a-link>
      </template>
    </a-table>
    <create-auth-dialog v-model:visible="visible" @refresh="handleRefresh" />
  </ContainerContent>
</template>
<script lang="ts" setup>
import ContainerContent from '@/components/ContentContainer.vue'
import type { CloudFilterBarState } from '@/components/filter-bar/types'
import { useTable } from '@/hooks'
import { useListRequest } from '@/hooks/useListRequest'
import { commonTableProps } from '@/utils/table'
import CreateAuthDialog from './CreateAuthDialog.vue'
import useTableColumn from './column'
import { getExpirationColor } from '../utils'
import {
  getAdminApiLicensesListApi,
  updateAdminApiLicenseApi
} from '@/apis/modules/authBind'
interface IEmits {
  (e: 'refresh-statistic'): void
}
const emit = defineEmits<IEmits>()
const { columns, filterSchemes } = useTableColumn()
const router = useRouter()
const { visible, open } = usePopup()
const params = ref<CloudFilterBarState>({
  order: '',
  sort: ''
})

const handleDetail = (record: any) => {
  router.push({
    name: 'AuthDetail',
    params: { id: record.id }
  })
}
const handleRefresh = () => {
  emit('refresh-statistic')
  run()
}
const { data, loading, run, pagination } = useListRequest(
  getAdminApiLicensesListApi,
  {
    immediate: true,
    params
  }
)

const { createSortChange } = useTable(run, data)
const onSorterChange = createSortChange(params)
const handleBeforeChange = (row: any, status: 1 | 2) => {
  return new Promise((resolve) => {
    const fn = () => {
      return updateAdminApiLicenseApi({ ...row, status }).then(() => {
        row.status = status
        resolve(true)
      })
    }
    if (status === 2) {
      CloudModal.error(
        {
          maskClosable: false,
          content: '停用授权，确认继续？'
        },
        fn,
        () => resolve(false)
      )
    } else {
      fn()
    }
  })
}
</script>
